<template>
  <div class="picContainer">
    <div class="title">
      鼠标 x:{{ mousePosition.x.toFixed(1) }} y:{{ mousePosition.y.toFixed(1) }} z:{{ mousePosition.z.toFixed(1) }}
    </div>
    <div ref="threeBoxRef" class="box">

    </div>

    <template v-for="(o,index) in cubes" :key="index" >
      <div class="info1"  :style="o.dynamicStyle"> {{o.name}} </div>
    </template>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRaw, toRefs} from 'vue';
import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import {GLTFLoader} from 'three/addons/loaders/GLTFLoader.js';
import {DoubleSide} from "three/src/constants";
import {Color} from "three/src/math/Color";
import {FontLoader} from 'three/addons/loaders/FontLoader.js'
import {TextGeometry} from 'three/addons/geometries/TextGeometry.js';
import sensorXYZ from "/@/views/iotApply/iotLocate/locate/component2/sensorXYZ.vue";
import {ElMessage} from "element-plus";
import {
  calculateCircleXYByArc, calculateEllipseXYByArc,
  computeScaleRate,
  defaultThreeData, ellipseCircumference,
  saveFloatFixByScaleRate, sealHeadTypeMap
} from "/@/views/iotApply/iotLocate/locate/component2/commonThree";


import {
  getPFormMaxData
} from "/@/views/iotApply/iotLocate/locate/component/cylinderFaceLocateComponent/cylinderFaceCommon";

export default defineComponent({
  name: 'cylinderFaceLocate3d',
  components:{
    sensorXYZ
  },
  setup(props,{emit}) {
    const threeBoxRef = ref()
    const info1Ref = ref()
    var mouse = new THREE.Vector2();
    let scene = new THREE.Scene();
    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    // 实例化一个透视投影相机对象
    const camera = new THREE.PerspectiveCamera();
    const raycaster = new THREE.Raycaster();

    //胶囊柱面
    const capsule = new THREE.Group();
    let topSphere: THREE.Mesh| null = null
    let bottomSphere: THREE.Mesh| null = null
    let cylinder: THREE.Mesh| null = null

    let axisLineMeshes = []
    let axisTextMeshes = []

    const state = reactive({
      mousePosition: {
        x: 0, y: 0, z: 0
      },
      threeData:{
      },
      pFormData:{ //用户原本的数据
        diameter:60,
        cylinderLength:60,
        lineCount:2,
        eachLineCount:4,
        sealHeadType:0,
        sealHeadHeight:30,
        showColumns:["no","x","y"],  //此模型展示哪些参数
        tableData:[], //传感器用户坐标
      },
      formData:{  //转化后的视图数据
        diameter:60,
        cylinderLength:60,
        lineCount:2,
        eachLineCount:4,
        sealHeadType:sealHeadTypeMap.top,
        sealHeadHeight:30,
        showColumns:["no","x","y"],  //此模型展示哪些参数
        tableData:[], //传感器用户坐标
      },
      cubes: [],
    });

    const renderPicOnce = ()=>{
      window.addEventListener("mousemove", listenMouseMove)
      renderer.setSize(state.threeData.width, state.threeData.height); //设置three.js渲染区域的尺寸(像素px)
      document.body.appendChild(renderer.domElement);

      // 添加光源
      const light = new THREE.DirectionalLight(0xffffff, 1);
      light.position.set(0,state.threeData.width, state.threeData.height);
      scene.add(light);

      threeBoxRef.value.appendChild(renderer.domElement);

      // 添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', function () {
        updateAllTextPosition()
        renderer.render(scene, camera); //执行渲染操作
      })
      camera.position.set(0, -600, 0);
      //相机观察目标指向Threejs 3D空间中某个位置
      camera.lookAt(scene.position); //坐标原点
      // 设置相机的视口与渲染器的尺寸相同
      camera.aspect = renderer.domElement.width / renderer.domElement.height;
      camera.updateProjectionMatrix();

      scene.position.set(0, -50, 0);

      renderPic()
    }

    // 清除画布
    function clearCanvas() {
      renderer.clear();
    }

    const renderPic = ()=> {
      // 清除画布
      clearCanvas();

      scene.background = new THREE.Color(state.threeData.bgColor)

      createAxis()

      // 创建自定义圆柱体几何体
      createCustomCylinderGeometry()

      createSensorBoxes()

      setTimeout(() => {
        renderer.render(scene, camera); //执行渲染操作
      }, 10)

    }


    // 页面加载时
    onMounted(() => {
      initThreeData()
      renderPicOnce()
    });

    const initThreeData = ()=>{
      state.threeData = defaultThreeData()
    }


    function createSensorBoxes() {
      if(!state.formData || !state.formData.tableData){
        return
      }
      state.cubes.map((item,index)=>{
        if(item.cube){
          item.cube.removeFromParent()
        }
      })
      state.cubes = []
      let tmp = []
      // console.log(state.formData.tableData.length)
      let eclipseCircel = ellipseCircumference(state.formData.diameter/2,state.formData.sealHeadHeight)
      // console.log("椭圆长轴半径和短轴半径",state.formData.diameter/2, state.formData.sealHeadHeight)
      // console.log("椭圆周长",eclipseCircel)
      // console.log("圆半径",state.formData.diameter/2)
      // console.log("圆周长",state.formData.diameter*Math.PI)
      state.formData.tableData.map((item,index)=>{
        const cube = createCubeItem(5)
        // 设置正方体的位置，使其位于胶囊体的中间一圈外表面
        const cubexyz = transferPlaneDataTo3dData(item.x,item.y)
        // console.log(cubexyz)
        cube.position.set(cubexyz.axisX, cubexyz.axisY, cubexyz.axisZ); // 调整位置以适应您的需求
        scene.add(cube);
        const judgeres = judgeSensorTextShow(cube)
        const display = judgeres ? "block":"none"
        tmp.push({
          name: item.no,
          dynamicStyle: {
            left: "0px",
            top: "0px",
            display: display,
          },
          cube:cube
        })
      })
      state.cubes = tmp
    }


    const transferPlaneDataTo3dData =(x:number,y:number) => {
      let res :any = null
      const ellipseParameter = ellipseCircumference(state.formData.diameter/2, state.formData.sealHeadHeight)
      const ellipse1of4 = ellipseParameter/4
      // 封头信息很重要。
      if(state.formData.sealHeadType == sealHeadTypeMap.bottom){
        if( y<ellipse1of4 ){   //说明是在底封头
          const arc1 = ellipse1of4 - y
          const calRes1 = calculateEllipseXYByArc(arc1,state.formData.diameter/2, state.formData.sealHeadHeight)
          // calRes1 x对应下面圆面的半径  y值对应的是Z轴
          let correctX =  x
          if(x > Math.PI * 2 * calRes1.x){
            correctX = Math.PI * 2 * calRes1.x
          }
          const calRes2 = calculateCircleXYByArc(correctX,calRes1.x )
          // calRes2 x对应三维X轴 y对应Y轴
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.sealHeadHeight - calRes1.y,
            correctX: correctX
          }
        }else{  //说明在柱体上
          let correctX =  x
          if(x > Math.PI * state.formData.diameter){
            correctX = Math.PI * state.formData.diameter
          }
          const calRes2 = calculateCircleXYByArc(correctX,state.formData.diameter/2)
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.sealHeadHeight + y - ellipse1of4,
            correctX: correctX
          }
        }
      }else if(state.formData.sealHeadType ==sealHeadTypeMap.both){
        if( y<ellipse1of4 ){   //说明是在底封头
          const arc1 = ellipse1of4 - y
          const calRes1 = calculateEllipseXYByArc(arc1,state.formData.diameter/2, state.formData.sealHeadHeight)
          // calRes1 x对应下面圆面的半径  y值对应的是Z轴
          let correctX =  x
          if(x > Math.PI * 2 * calRes1.x){
            correctX = Math.PI * 2 * calRes1.x
          }
          const calRes2 = calculateCircleXYByArc(correctX,calRes1.x )
          // calRes2 x对应三维X轴 y对应Y轴
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.sealHeadHeight - calRes1.y,
            correctX: correctX
          }
        }else if(y>=ellipse1of4 && y<= ellipse1of4+ state.formData.cylinderLength ){  //说明在柱体上
          let correctX =  x
          if(x > Math.PI * state.formData.diameter){
            correctX = Math.PI * state.formData.diameter
          }
          const calRes2 = calculateCircleXYByArc(correctX,state.formData.diameter/2)
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.sealHeadHeight + y - ellipse1of4,
            correctX: correctX
          }
        }else{  //说明是在上封头
          const arc1 = y - state.formData.cylinderLength - ellipse1of4
          const calRes1 = calculateEllipseXYByArc(arc1,state.formData.diameter/2, state.formData.sealHeadHeight)
          // calRes1 x对应下面圆面的半径  y值对应的是Z轴
          let correctX =  x
          if(x > Math.PI * 2 * calRes1.x){
            correctX = Math.PI * 2 * calRes1.x
          }
          const calRes2 = calculateCircleXYByArc(correctX,calRes1.x )
          // calRes2 x对应三维X轴 y对应Y轴
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.sealHeadHeight + state.formData.cylinderLength + calRes1.y,
            correctX: correctX
          }
        }
      }else if(state.formData.sealHeadType ==sealHeadTypeMap.none){   //说明是在说明在柱体上
        let correctX =  x
        if(x > Math.PI * state.formData.diameter){
          correctX = Math.PI * state.formData.diameter
        }
        const calRes2 = calculateCircleXYByArc(correctX,state.formData.diameter/2)
        return {
          axisX: calRes2.x,
          axisY: calRes2.y,
          axisZ: y,
          correctX: correctX
        }
      }else if(state.formData.sealHeadType ==sealHeadTypeMap.top){
        if(y <= state.formData.cylinderLength ){  //说明在柱体上
          let correctX =  x
          if(x > Math.PI * state.formData.diameter){
            correctX = Math.PI * state.formData.diameter
          }
          const calRes2 = calculateCircleXYByArc(correctX,state.formData.diameter/2)
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: y,
            correctX: correctX
          }
        }else{ //说明是在上封头
          const arc1 = y-state.formData.cylinderLength
          const calRes1 = calculateEllipseXYByArc(arc1,state.formData.diameter/2, state.formData.sealHeadHeight)
          // calRes1 x对应下面圆面的半径  y值对应的是Z轴
          let correctX =  x
          if(x > Math.PI * 2 * calRes1.x){
            correctX = Math.PI * 2 * calRes1.x
          }
          const calRes2 = calculateCircleXYByArc(correctX,calRes1.x )
          // calRes2 x对应三维X轴 y对应Y轴
          return {
            axisX: calRes2.x,
            axisY: calRes2.y,
            axisZ: state.formData.cylinderLength + calRes1.y,
            correctX: correctX
          }
        }
      }
      return {
        axisX: 0,
        axisY: 0,
        axisZ: 0,
        correctX: 0
      }
    }




    // 创建自定义圆柱体几何体
    function createCustomCylinderGeometry() {
      //capsule不能重复绘制
      if(topSphere){
        capsule.remove(topSphere)
      }
      if(bottomSphere){
        capsule.remove(bottomSphere)
      }
      if(cylinder){
        capsule.remove(cylinder)
      }
      capsule.removeFromParent()

      // 创建两个半球体（球顶）
      const radius = state.formData.diameter / 2 ; // 半球体的半径
      const longRadius = state.formData.diameter / 2;   //椭球的长半轴
      const shortRadius = state.formData.sealHeadHeight;   //椭球的短半轴
      const widthSegments = 24;
      const heightSegments = 24;
      const sphereGeometry1 = new THREE.SphereGeometry(
        longRadius,
        widthSegments,
        heightSegments,
        0,
        Math.PI*2,
        0,
        Math.PI/2,
      );
      sphereGeometry1.scale(1, shortRadius / longRadius, 1); // 根据长短半轴比例缩放椭球体
      const sphereGeometry2 = new THREE.SphereGeometry(
        longRadius,
        widthSegments,
        heightSegments,
        0,
        Math.PI*2,
        Math.PI*2,
        Math.PI,
      );
      sphereGeometry2.scale(1, shortRadius / longRadius, 1); // 根据长短半轴比例缩放椭球体

      const sphereMaterial = new THREE.MeshBasicMaterial({
        color: 0xeaeaea ,
        transparent:true,//开启透明
        opacity:0.9,//设置透明度,
      });

      topSphere = new THREE.Mesh(sphereGeometry1, sphereMaterial);
      bottomSphere = new THREE.Mesh(sphereGeometry2, sphereMaterial);

      // 设置两个半球体的位置
      topSphere.position.set(0, state.formData.cylinderLength/2, 0); // 1是主体圆柱体的高度的一半
      bottomSphere.position.set(0, -state.formData.cylinderLength/2, 0);

      // 创建圆柱体（胶囊体的主体）
      const cylinderGeometry = new THREE.CylinderGeometry(radius, radius, state.formData.cylinderLength, widthSegments, heightSegments);

      const capsuleMaterial = new THREE.MeshBasicMaterial({
        color: 0xdadada,
        transparent:true,//开启透明
        opacity:0.9,//设置透明度
      });

      cylinder = new THREE.Mesh(cylinderGeometry, capsuleMaterial);

      // 将两个半球体和圆柱体组合成一个 Three.js 对象
      if(state.formData.sealHeadType == sealHeadTypeMap.both || state.formData.sealHeadType==sealHeadTypeMap.top){
        capsule.add(topSphere);
      }
      if(state.formData.sealHeadType == sealHeadTypeMap.both || state.formData.sealHeadType==sealHeadTypeMap.bottom){
        capsule.add(bottomSphere);
      }
      capsule.add(cylinder);


      capsule.rotation.x = Math.PI / 2;

      //主要是把柱体往z轴方向挪
      if(state.formData.sealHeadType== sealHeadTypeMap.bottom ||
        state.formData.sealHeadType == sealHeadTypeMap.both){
        capsule.position.set(0,0,state.formData.sealHeadHeight+ state.formData.cylinderLength/2)
      }else{
        capsule.position.set(0,0,state.formData.cylinderLength/2)
      }

      // 将胶囊体添加到场景
      scene.add(capsule);
    }


    // 创建XYZ轴
    function createAxis() {
      var axisLabelFont;
      var fontLoader = new FontLoader();
      //'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json'
      fontLoader.load("/threefont.json", function (font) { // 加载字体文件
        axisLabelFont = font;
        createAxisHelper(axisLabelFont);
      });
    }

    function createAxisHelper(font:any) {
      if(axisLineMeshes.length > 0){
        axisLineMeshes.map((item:THREE.Line)=>{
          item.removeFromParent()
        })
      }
      if(axisTextMeshes.length > 0){
        axisTextMeshes.map((item:THREE.Mesh)=>{
          item.removeFromParent()
        })
      }
      axisLineMeshes = []
      axisTextMeshes = []

      var materialX = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 红色X轴
      var materialY = new THREE.LineBasicMaterial({ color: 0x00ff00 }); // 绿色Y轴
      var materialZ = new THREE.LineBasicMaterial({ color: 0x0000ff }); // 蓝色Z轴

      const xmin = 0
      const xmax = Math.abs( state.formData.diameter/2)
      const xstep = ( xmax - xmin) / 5
      const xhalf = xmax / 2

      const ymin = 0
      const ymax = Math.abs( state.formData.diameter/2)
      const ystep = ( ymax - ymin) / 5
      const yhalf = ymax / 2

      const zmin = 0
      const zmax = Math.abs( state.formData.cylinderLength + 2*state.formData.sealHeadHeight)
      const zstep = ( zmax - zmin) / 5
      const zhalf = zmax/ 2

      // X轴刻度和刻度值
      for (var i = xmin; i <= xmax+xstep; i+=xstep) {
        var geometry = new THREE.BufferGeometry();
        var positions = new Float32Array([
          i, 0, 0,
          i, 0.2, 0
        ]);
        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        var line = new THREE.Line(geometry, materialX);
        axisLineMeshes.push(line)
        scene.add(line);

        const textLabel = (i* state.threeData.scaleRate).toFixed(0)
        var textGeometry = new TextGeometry(textLabel, {
          font: font,
          size: parseInt((xstep/4).toString()),
          height: 1
        });
        var textMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
        var textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.set(i, -0.5, 0.2);
        axisTextMeshes.push(textMesh)
        scene.add(textMesh);
      }

      // Y轴刻度和刻度值
      for (var i = ymin; i <= ymax+ystep; i+=ystep) {
        var geometry = new THREE.BufferGeometry();
        var positions = new Float32Array([
          0, i, 0,
          0.2, i, 0
        ]);
        geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        var line = new THREE.Line(geometry, materialY);
        axisLineMeshes.push(line)
        scene.add(line);
        const textLabel = (i* state.threeData.scaleRate).toFixed(0)
        var textGeometry = new TextGeometry(textLabel, {
          font: font,
          size: parseInt((xstep/4).toString()),
          height: 1
        });
        var textMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
        var textMesh = new THREE.Mesh(textGeometry, textMaterial);
        textMesh.position.set(-0.5, i, 0.2);
        axisTextMeshes.push(textMesh)
        scene.add(textMesh);
      }

      // Z轴刻度和刻度值
      // for (var i = zmin; i <= zmax+zstep;  i+=zstep) {
      //     var geometry = new THREE.BufferGeometry();
      //     var positions = new Float32Array([
      //         0, 0, i,
      //         0.2, 0, i
      //     ]);
      //     geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      //     var line = new THREE.Line(geometry, materialZ);
      //     axisLineMeshes.push(line)
      //     scene.add(line);
      //
      //     const textLabel = (i* state.threeData.scaleRate).toFixed(0)
      //     var textGeometry = new TextGeometry(textLabel, {
      //         font: font,
      //         size: parseInt((xstep/4).toString()),
      //         height:1
      //     });
      //     var textMaterial = new THREE.MeshBasicMaterial({ color: 0x888888 });
      //     var textMesh = new THREE.Mesh(textGeometry, textMaterial);
      //     textMesh.position.set(-0.5, 0.2, i);
      //     axisTextMeshes.push(textMesh)
      //     scene.add(textMesh);
      // }

      // XYZ轴线
      var xAxisGeometry = new THREE.BufferGeometry();
      var xAxisPositions = new Float32Array([
        xmin, 0, 0,
        xmax+xstep, 0, 0
      ]);
      xAxisGeometry.setAttribute('position', new THREE.BufferAttribute(xAxisPositions, 3));
      var xAxisLine = new THREE.Line(xAxisGeometry, materialX);
      axisLineMeshes.push(xAxisLine)
      scene.add(xAxisLine);

      var yAxisGeometry = new THREE.BufferGeometry();
      var yAxisPositions = new Float32Array([
        0, ymin, 0,
        0, ymax+ystep, 0
      ]);
      yAxisGeometry.setAttribute('position', new THREE.BufferAttribute(yAxisPositions, 3));
      var yAxisLine = new THREE.Line(yAxisGeometry, materialY);
      axisLineMeshes.push(yAxisLine)
      scene.add(yAxisLine);

      // var zAxisGeometry = new THREE.BufferGeometry();
      // var zAxisPositions = new Float32Array([
      //     0, 0, zmin,
      //     0, 0, zmax+zstep
      // ]);
      // zAxisGeometry.setAttribute('position', new THREE.BufferAttribute(zAxisPositions, 3));
      // var zAxisLine = new THREE.Line(zAxisGeometry, materialZ);
      // axisLineMeshes.push(zAxisLine)
      // scene.add(zAxisLine);

      renderer.render(scene, camera); //执行渲染操作
    }

    function updateAllTextPosition(){
      state.cubes.map((item,index)=>{
        if(item.cube){
          updateTextPosition(index,item.cube)
        }
      })
    }

    function updateTextPosition(index, cube) {
      const vector = new THREE.Vector3();
      cube.getWorldPosition(vector);
      vector.project(camera);

      const x = (vector.x * .5 + .5) * state.threeData.width;
      const y = (-vector.y * .5 + .5) * state.threeData.height;

      state.cubes[index].dynamicStyle.left = x + "px"
      state.cubes[index].dynamicStyle.top = y + "px"

      const judgeres = judgeSensorTextShow(cube)
      const display = judgeres ? "block":"none"
      state.cubes[index].dynamicStyle.display = display
    }

    //判断该传感器的文字要不要显示 被挡住了则不显示
    const judgeSensorTextShow = (onecube:THREE.Mesh)=>{
      if(!capsule){
        return true
      }
      // 获取球体和附着物的世界位置
      const sphereWorldPosition = new THREE.Vector3();
      capsule.getWorldPosition(sphereWorldPosition);

      const attachedObjectWorldPosition = new THREE.Vector3();
      onecube.getWorldPosition(attachedObjectWorldPosition);

      const cameraWorldPosition = new THREE.Vector3();
      camera.getWorldPosition(cameraWorldPosition);

// 计算球体中心到相机的向量和球体中心到附着物的向量
      const sphereToCameraVector = new THREE.Vector3().subVectors(cameraWorldPosition, sphereWorldPosition);
      const sphereToAttachedObjectVector = new THREE.Vector3().subVectors(attachedObjectWorldPosition, sphereWorldPosition);

// 归一化向量
      sphereToCameraVector.normalize();
      sphereToAttachedObjectVector.normalize();

// 使用点积判断方向
      const dotProduct = sphereToCameraVector.dot(sphereToAttachedObjectVector);

      if (dotProduct < 0) {
        // console.log('附着物位于球体背面');
        return false
      } else {
        // console.log('附着物位于球体前面');
        return true
      }
    }


    function createCubeItem(cubesize:number) {
      const cubeGeometry = new THREE.BoxGeometry(cubesize, cubesize, cubesize); // 正方体的尺寸
      const material = new THREE.MeshBasicMaterial({color: "#0000ee"});
      const cube = new THREE.Mesh(cubeGeometry, material);
      return cube;
    }

    function addPoints(x:number,y:number,z:number) {
      const geometry = new THREE.SphereGeometry(20, 8, 8);
      const material = new THREE.MeshBasicMaterial({color: 0xff0000});
      const sphere = new THREE.Mesh(geometry, material);
      sphere.position.set(x, y, z); // 调整位置以适应您的需求
      scene.add(sphere);
    }

    const listenMouseMove = (event: any) => {
      const px = event.offsetX;
      const py = event.offsetY;
      //屏幕坐标px、py转标准设备坐标x、y
      //width、height表示canvas画布宽高度
      const x = (px / state.threeData.width) * 2 - 1;
      const y = -(py / state.threeData.height) * 2 + 1;
      mouse.x = x
      mouse.y = y
      // 将鼠标坐标转换为世界坐标
      raycaster.setFromCamera(mouse, camera);
      // 使用光线投射器来获取与射线相交的物体
      const intersects = raycaster.intersectObjects(scene.children, true);
      if (intersects.length > 0) {
        var intersection = intersects[0];
        var position = intersection.point;

        // 在控制台中打印三维坐标
        //console.log('Mouse Position:', position);
        position.x = Number(position.x)*state.threeData.scaleRate
        position.y = Number(position.y)*state.threeData.scaleRate
        position.z = Number(position.z)*state.threeData.scaleRate
        state.mousePosition = position
      }
    }

    const changePForm2Form = ()=>{
      const maxdata = getPFormMaxData(state.pFormData)
      const scaleRate = computeScaleRate(maxdata,state.threeData.compareSize)
      state.threeData.scaleRate = scaleRate
      const tofixed = saveFloatFixByScaleRate(scaleRate)
      state.formData = Object.assign({},state.pFormData)
      // 需要另外根据比例赋值的
      // console.log(maxdata)
      // console.log(scaleRate)
      // console.log(Number(state.pFormData.diameter))
      state.formData.diameter = Number((Number(state.pFormData.diameter) / scaleRate).toFixed(tofixed))
      state.formData.cylinderLength = Number((Number(state.pFormData.cylinderLength) / scaleRate).toFixed(tofixed))
      state.formData.sealHeadHeight = Number((Number(state.pFormData.sealHeadHeight) / scaleRate).toFixed(tofixed))
      if(state.pFormData.tableData){
        let tabledataTmp = []
        state.pFormData.tableData.map((item:any,index:number)=>{
          const copyItem = Object.assign({},item)
          copyItem.x = Number((Number(item.x) / scaleRate).toFixed(tofixed))
          copyItem.y = Number((Number(item.y) / scaleRate).toFixed(tofixed))
          tabledataTmp.push(copyItem)
        })
        state.formData.tableData = tabledataTmp
      }
      // console.log(toRaw(state.formData))
      // console.log(toRaw(state.threeData))
    }



    const reRender = (pFormData:any)=>{
      updateFormData(pFormData)
      renderPic()
      updateAllTextPosition()
      renderer.render(scene, camera); //执行渲染操作
    }

    const updateFormData = (pFormData:any) => {
      state.pFormData = Object.assign({},pFormData)
      changePForm2Form()
    }

    return {
      threeBoxRef,
      info1Ref,
      ...toRefs(state),
      reRender,
      updateFormData,
    }
  }
})
</script>

<style scoped lang="scss">
.picContainer{
  display: flex;
  flex-direction: column;
  position: relative;
  .title{
    width: 600px;
    text-align: center;
  }
  .box{

  }
}

.info1 {
  position: absolute;
  top: 0;
  z-index: 100;
  display:inline-block;
  line-height: 1;
  color:orangered;
  font-weight: bold;
  font-size: 13px;
}

body {
  margin: 0;
}

canvas {
  display: block;
}

.label {
  position: absolute;
  color: black;
  font-size: 14px;
}

</style>


